<template>
	<div>
		<div v-show="Login == true">
			<div id="login_container">
				<div id="login_box">
					<!-- 头像 -->
					<div id="avatar_box">
						<img src="../../assets/img/SMB.png" />
					</div>

					<!-- 登录表单区域 -->
					<Form :model="loginForm" label-width="0px" id="login_form">

						<!-- 用户名 -->
						<Form-item>
							<Input v-model="loginForm.share"></Input>
						</Form-item>
						<!-- 密码 -->
						<Form-item>
							<Input v-model="loginForm.username"></Input>
						</Form-item>
						<!-- 密码 -->
						<Form-item>
							<Input v-model="loginForm.password" type="password"></Input>
						</Form-item>
						<!-- 按钮区域 -->
						<Form-item style="text-align: center;">
							<Button @click="GoFTP">连接SMB共享</Button>
						</Form-item>
					</Form>
				</div>

			</div>
		</div>



		<div v-show="Login == false">
			<div style="height: 30px;width: 100%;">
				<div style="display: flex;justify-content:space-between;">
					<Row type="flex" justify="start" class="code-row-bg" style="float: left;padding-right: 5px; height: 40px;line-height: 60px;">
						<div style="float:left; margin-left:10px; line-height: 40px;">
							<Button size="small" icon="ios-cloud-upload" @click="upload">上传</Button>
							<Drawer title="文件上传" :closable="false" v-model="UploadDetails">
								<Upload multiple type="drag" action="//jsonplaceholder.typicode.com/posts/" :before-upload="UploadFile">
									<div style="padding: 20px 0">
										<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
										<p>Click or drag files here to upload</p>
									</div>
								</Upload>
							</Drawer>
							<Button size="small" icon="ios-add-circle" @click="NewFolder = true">新建</Button>
							<Modal title="新建文件夹" v-model="NewFolder" @on-ok="YesFolder" @on-cancel="Nofolder">
								<Input v-model="FolderValue" placeholder="请输入新建文件夹的名称……" style="width: 100%;" />
							</Modal>
						</div>
						<div style="margin-left:5px; line-height: 40px;">
							<ButtonGroup>
								<Button size="small" v-show="button" icon="md-trash" @click="Deletes">删除</Button>
								<Button size="small" v-show="button" icon="md-cloud-download" @click="download">下载</Button>
								<Button size="small" v-show="button" icon="ios-copy" @click="Copys">复制到</Button>
								<Button size="small" v-show="button" icon="ios-albums">移动到</Button>
							</ButtonGroup>
						</div>
					</Row>

					<div style="display: flex;align-items: center;">
						<div style="height: 40px;">
							<Input v-model="SearchValue" suffix="ios-search" size="small" placeholder="搜索" style="margin-top: 7px; width: auto; float: right; margin-right: 10px;"
							 @on-change="sousou" />
						</div>
					</div>
				</div>
			</div>

			<div style="width: 100%;height: 30px;margin-top:10px;float: left;padding-left: 20px;">

				<Breadcrumb>
					<a @click="Back">
						<Icon type="ios-arrow-back" size="20" />
					</a>
					<a>
						<Icon type="md-refresh" size="20" />
					</a>
					<a style="color: #3f3f3f;" @click="aaaaa(index)" v-for="(item,index) in path">
						<BreadcrumbItem>
							<Icon type="ios-home-outline" size="20"></Icon>
							{{item}}
						</BreadcrumbItem>
					</a>
				</Breadcrumb>
			</div>

			<ul v-for="item in aaa" style="float: left;margin: 5px;" @contextmenu="showMenu">
				<vue-context-menu :contextMenuData="contextMenuData" @home="home" @deletedata="deletedata" @NewFile="NewFile = true"></vue-context-menu>
				<div id="div" @dblclick="dbClick(item)">
					<!-- <Checkbox style="position: absolute;" @on-change="select(item)"></Checkbox> -->
					<img v-if="item.type==1" src="../../assets/icon/6.png" width="60px" height="60px" />
					<img v-if="item.type==0" src="../../assets/icon/4.png" width="60px" height="60px" />
					<h5>{{item.filename}}</h5>
				</div>
			</ul>
		</div>
	</div>
</template>
<script>
	import smb from 'smb2'
	export default {
		data() {
			return {
				loginForm: {
					share: '\\\\192.168.20.22\\myth',
					username: 'myth',
					password: '123456'
				},
				Login: true,
				path: '',
				username: '',
				password: '',
				aaa: [],
				path: [], //面包屑路径
				NewFolder: false, //新建文件夹弹窗
				FolderValue: "", //新建文件夹value
				NewFile: false, //重命名弹窗
				FileValue: "", //重命名value
				UploadDetails: false,
				SearchValue: "", //搜索文件value
				columns1: [{
					title: '文件名',
					kesy: 'cellClassName'
				}],
				contextMenuData: {
					menuName: 'demo',
					//菜单显示的位置
					axis: {
						x: null,
						y: null
					},
					//菜单选项
					menulists: [{
						fnHandler: 'deleted', //绑定事件
						btnName: '删除', //菜单名称
					}, {
						fnHandler: 'NewFile',
						btnName: '重命名'
					}, {
						fnHandler: 'xiazai',
						btnName: '下载'
					}]
				}
			}
		},
		mounted() {
			this.Refresh()
		},
		methods: {
			GoFTP() {
				this.Login = false
			},
			aaaaa(row, index) {
				// 获取点击的名字
				var name = this.path[row];
				// 将数组转换字符串
				var Clickpath = this.path.join("/");
				// 截取到点击的路径
				var path = Clickpath.substring(
					0,
					Clickpath.lastIndexOf(name) + name.length
				);
				// 将路径转换成数组
				this.path = path.split("/");
				this.Refresh();
			},
			upload() {
				this.UploadDetails = true;
				//判断是否为根目录
				this.path = [];
				setTimeout(() => {
					this.aaa.push({
						filename: 'test.txt',
						type: 0
					});
					this.Refresh()

				}, 3000)
			},
			showMenu() {
				event.preventDefault()
				var x = event.clientX
				var y = event.clientY
				// Get the current location
				this.contextMenuData.axis = {
					x,
					y
				}
			},
			// 获取文件列表
			Refresh() {
				var smb2Client = new smb({
					share: '\\\\192.168.20.22\\myth',
					domain: 'DOMAIN',
					username: 'myth',
					password: '123456'
				});
				// 动态获取当前路径
				var path = this.path.join("\\");
				if (this.aaa.length == 0 && path == "") {
					var files = [{
						filename: '测试文档1.txt',
						type: 0
					}, {
						filename: '测试文档2.txt',
						type: 0
					}, {
						filename: '测试文档3.txt',
						type: 0
					}, {
						filename: '1',
						type: 1
					}];
					this.aaa = files;
				}
			},
			// 双击事件
			dbClick(row) {
				// row为双击的文件夹名称
				this.path.splice(this.path.length, 0, row.filename);
				if (row.filename == "1") {
					var files = [{
						filename: '测试文档4.txt',
						type: 0
					}];
					this.aaa = files;
				} else {
					var files = [{
						filename: '测试文档4.txt',
						type: 0
					}];
					this.aaa = files;
				}
				console.log(this.path)
				this.Refresh()
			},
			// 删除文件
			deleted() {
				var smb2Client = new smb({
					share: '\\\\192.168.20.22\\myth',
					domain: 'DOMAIN',
					username: 'myth',
					password: '123456'
				});

				smb2Client.unlink('1.txt', function(err) {
					if (err) throw err;
					console.log("file has been deleted");
				});

				setTimeout(() => {
					this.Refresh()
					console.log('删除文件')
				}, 1000)
			},
			// 删除文件夹
			DeleteFolder() {
				var smb2Client = new smb({
					share: '\\\\192.168.20.22\\myth',
					domain: 'DOMAIN',
					username: 'myth',
					password: '123456'
				});

				smb2Client.rmdir('1', function(err) {
					if (err) throw err;
					console.log('Folder deleted!');
				});

				setTimeout(() => {
					this.Refresh()
					console.log('删除文件夹')
				}, 1000)
			},
			// 重命名
			Renamed() {
				setTimeout(() => {
					this.Refresh()
					console.log('重命名')
				}, 1000)
			},
			//  判断文件是否存在
			sousou() {
				var value = this.SearchValue
				var smb2Client = new smb({
					share: '\\\\192.168.20.22\\myth',
					domain: 'DOMAIN',
					username: 'myth',
					password: '123456'
				});

				smb2Client.exists(value, function(err, exists) {
					if (err) throw err;
					console.log(exists ? "it's there" : "it's not there!");
				});
			},
			// 新建文件夹
			YesFolder() {
				this.aaa.push({
					filename: '测试文件夹',
					type: 1
				});
				setTimeout(() => {
					this.Refresh()
					console.log('新建文件夹')
				}, 1000)

				alert('新建文件夹成功')
			},
			Back() {
				//判断是否为根目录
				this.path = [];
				var files = [{
					filename: '测试文档1.txt',
					type: 0
				}, {
					filename: '测试文档2.txt',
					type: 0
				}, {
					filename: '测试文档3.txt',
					type: 0
				}, {
					filename: '1',
					type: 1
				}];

				this.aaa = files;
				//刷新目录
				this.Refresh();
			}
		}
	}
</script>

<style lang="less" scoped>
	#login_container {
		background-color: #2b4b6b;
		height: 100%;
	}

	#login_box {
		width: 450px;
		height: 300px;
		background-color: #fff;
		border-radius: 3px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);

		#avatar_box {
			height: 130px;
			width: 130px;
			border: 1px solid #eee;
			border-radius: 50%;
			padding: 10px;
			box-shadow: 0 0 10px #ddd;
			position: absolute;
			left: 50%;
			transform: translate(-50%, -50%);

			img {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background-color: #eee;
			}
		}
	}

	#login_form {
		position: absolute;
		bottom: 0;
		width: 100%;
		padding: 0 20px;
		box-sizing: border-box;
	}

	#btn {
		display: flex;
		justify-content: flex-end;
	}
</style>


<!--
 删除文件
 smb2Client.unlink('path\\to\\my\\file.txt', function (err) {
     if (err) throw err;
     console.log("file has been deleted");
 });

 删除文件夹
 smb2Client.rmdir('path\\to\\the\\folder', function (err) {
     if (err) throw err;
     console.log('Folder deleted!');
 });

 重命名
 smb2Client.rename('path\\to\\my\\file.txt', 'new\\path\\to\\my\\new-file-name.txt', function (err) {
     if (err) throw err;
     console.log("file has been renamed");
 });

 判断文件是否存在
 smb2Client.exists('path\\to\\my\\file.txt', function (err, exists) {
     if (err) throw err;
     console.log(exists ? "it's there" : "it's not there!");
 });

 新建文件夹
 smb2Client.mkdir('path\\to\\the\\folder', function (err) {
     if (err) throw err;
     console.log('Folder created!');
 });

 写入文件
 smb2Client.writeFile('path\\to\\my\\file.txt', 'Hello Node', function (err) {
     if (err) throw err;
     console.log('It\'s saved!');
 });

 smb2Client.readFile('path\\to\\my\\file.txt', function(err, data){
     if(err) throw err;
     console.log(data);
 });
 -->
